﻿<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Login.aspx.cs" Inherits="Login" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">

    <style type="text/css">
       /* .auto-style1{
                text-align:right;
                height:22px;
        }
        .tdcenter{
            text-align: center;
            font-weight: bold;
            font-size: large;
            padding-bottom: 10px;
            color:palevioletred;
        }*/
         .auto-style1{
             text-align: right;
             height: 17px;
             width: 100%;
             max-width: 600px;
             margin: auto;
             border-spacing: 10px;
     

             background-color: #ffffff;
             border-radius: 8px;
             box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
             padding: 20px;
         }
 
  /* 表单中心标题 */
     .tdcenter {
         text-align: center;
         font-weight: bold;
         font-size: 22px;
         padding-bottom: 10px;
         color: #d63384;
     }
    /*天气预报*/
      #weather-box {
        padding: 20px;
        text-align: center;
        background-color: #f7f8fc;
        border-radius: 10px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        margin-top: 20px;
        width: 80%;
        margin: 0 auto;
        font-family: 'Arial', sans-serif;
    }

    h3 {
        font-size: 24px;
        color: #d63384;
        margin-bottom: 15px;
    }

    .card {
        background-color: white;
        border-radius: 12px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        padding: 20px;
        margin-bottom: 20px;
        text-align: left;
        width: 90%;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        transition: transform 0.2s, box-shadow 0.2s;
    }

    .card:hover {
        transform: translateY(-5px);
        box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
    }

    .card img {
        width: 60px;
        height: 60px;
        margin-right: 20px;
    }

    .card .details {
        flex: 1;
        margin-left: 10px;
    }

    .card .date {
        font-weight: bold;
        font-size: 18px;
        color: #444;
        margin-bottom: 5px;
    }

    .card p {
        margin: 5px 0;
        font-size: 16px;
        color: #333;
    }

    .card .temperature {
        font-size: 18px;
        color: #d63384;
    }

    .card .separator {
        border-top: 1px solid #eee;
        margin: 20px 0;
    }

    .card .weather-icon {
        width: 60px;
        height: 60px;
    }

    .card .details p {
        font-size: 16px;
        margin: 5px 0;
    }

    .card .details .date {
        font-size: 16px;
        color: #888;
    }

    .card .details .temperature {
        font-size: 20px;
        font-weight: bold;
        color: #d63384;
    }

    .separator {
        border-top: 1px solid #eee;
        margin: 15px 0;
    }

    #current-weather {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 20px;
    }

    #current-weather img {
        margin-right: 10px;
    }
    
/*新闻*/
/* 新闻容器 */
/*#news-container {
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    margin-top: 60px;
    width: 90%;
    margin: 0 auto;
    font-family: 'Arial', sans-serif;
}*/

/* 标题 */
#news-container h3 {
    font-size: 26px;
    color: #d63384;
    margin-bottom: 15px;
    text-align: center;
}

/* 新闻列表样式 */
#news-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

#news-list li {
    margin-bottom: 15px;
    padding: 10px;
    background-color: #f9f9f9;
    border-radius: 5px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

#news-list li a {
    text-decoration: none;
    font-weight: bold;
    color: #333;
}

#news-list li p {
    margin: 5px 0 0;
    font-size: 12px;
    color: #666;
}


/* 新闻悬停效果 */
#news-list li:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
}

/* 新闻链接 */
#news-list li a {
    text-decoration: none;
    color: #333;
    font-size: 20px;
    font-weight: bold;
    line-height: 1.4;
    display: block;
    margin-bottom: 8px;
}

/* 新闻日期 */
#news-list li p {
    color: #888;
    margin: 0;
    font-size: 14px;
}





    </style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
     <table class="auto-style1">
   <tr>
     <td class="tdcenter" colspan="2">登录</td>
   </tr>
   <tr>
     <td class="tdright">用户名:</td>
     <td>
       <asp:TextBox ID="txtName" runat="server"></asp:TextBox></td>
     <td>
       <asp:RequiredFieldValidator ControlToValidate="txtName" Display="Dynamic" ForeColor="Red" ID="rfvName" runat="server" ErrorMessage="必填"></asp:RequiredFieldValidator>
     </td>
   </tr>
   <tr>
     <td class="tdright">密码:</td>
     <td>
       <asp:TextBox ID="txtPwd" runat="server" TextMode="Password"></asp:TextBox></td>
     <td>
       <asp:RequiredFieldValidator ControlToValidate="txtPwd" Display="Dynamic" ForeColor="Red" ID="rfvPwd" runat="server" ErrorMessage="必填"></asp:RequiredFieldValidator>
     </td>
   </tr>
   <tr>
     <td colspan="2" class="tdright">
       <asp:Button ID="btnLogin" runat="server" Text="立即登录" OnClick="btnLogin_Click1" />
     </td>
   </tr>
   <tr>
     <td><a href="NewUser.aspx">我要注册！</a></td>
     <td><a href="GetPwd.aspx">忘记密码？</a></td>
   </tr>
   <tr>
     <td colspan="2" class="tdright">
       <asp:Label ID="lblMsg" runat="server" ForeColor="Red"></asp:Label>
     </td>
   </tr>
 </table>
   
    <div id="news-container">
    <h3>健康新闻与资讯</h3>
    <ul id="news-list">
        <!-- 新闻内容将动态加载到此处 -->
    </ul>
</div>

<script>
    // RSS to JSON API 的 URL
    const rssUrl = 'https://api.rss2json.com/v1/api.json?rss_url=https://rss.sciencedaily.com/health_medicine.xml';
    // 本地假数据，用于模拟新闻数据
    const mockData = [
        { title: "靶向'不可药物化'的疾病：靶向蛋白降解的详细层次", link: "#", pubDate: "2024-10-11" },
        { title: "研究人员发现与RSV更严重病例相关的迹象", link: "#", pubDate: "2024-10-11" },
        { title: "世界首个原子编辑：药物发现的新范式？", link: "#", pubDate: "2024-10-11" },
        { title: "有缺陷的精子增加子痫前期的风险", link: "#", pubDate: "2024-10-11" }
    ];


    // 加载并显示本地假数据（只显示前3条新闻）
    
    function loadMockNews() {
        const newsList = document.getElementById('news-list');
        newsList.innerHTML = ''; // 清空之前的内容

        // 只取前三条新闻
        const limitedNews = mockData.slice(0, 3);

        limitedNews.forEach(item => {
            const listItem = document.createElement('li');
            listItem.innerHTML = `<a href="${item.link}" target="_blank">${item.title}</a><p>${item.pubDate}</p>`;
            newsList.appendChild(listItem);
        });
    }

   


    // 页面加载时调用函数
    loadMockNews();

    // 获取并显示健康新闻（只显示3条）
    async function loadRSS() {
        try {
            const response = await fetch(rssUrl);
            const data = await response.json();

            console.log('API 响应:', data);  // 打印 API 返回的数据

            if (data.status === "ok") {
                const newsList = document.getElementById('news-list');
                newsList.innerHTML = '';  // 清空列表

                // 只取前三条 RSS 数据并添加到页面
                data.items.slice(0, 4).forEach(item => {
                    const listItem = document.createElement('li');
                    listItem.innerHTML = `
                <a href="${item.link}" target="_blank">${item.title}</a>
                <p>${new Date(item.pubDate).toLocaleDateString()}</p>
            `;
                    newsList.appendChild(listItem);
                });
            } else {
                document.getElementById('news-list').innerHTML = '<li>未能获取新闻数据，请稍后再试。</li>';
                loadMockNews();  // 如果无法获取 RSS 数据，则加载假数据
            }
        } catch (error) {
            console.error('获取RSS数据失败:', error);  // 打印错误信息
            document.getElementById('news-list').innerHTML = '<li>获取新闻数据失败，请稍后重试。</li>';
            loadMockNews();  // 如果失败，则加载本地假数据
        }
    }

    // 页面加载时调用函数
    loadRSS();

</script>


</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder2" Runat="Server">
 <div id="weather-box">
    <h3>实时天气</h3>
    <div id="current-weather">
        <img id="weather-icon" src="" alt="天气图标" style="display: none; width: 60px;">
        <p id="weather-info">正在获取天气信息...</p>
    </div>
    <h3>未来 3 天天气预报</h3>
    <div id="forecast-weather">
        <!-- 这里将会显示未来15天的天气 -->
    </div>
</div>

<!-- 将 JavaScript 代码放在页面的底部 -->
<script>
    // 替换为你的高德 API 密钥
    const apiKey = '42e8e3e1a4e1b2aaca4d085719e4953a';
    const cityCode = '110000';  // 北京市的行政区划代码

    // 调用高德天气 API 获取天气数据
    async function getWeather() {
        const cityCode = '110000';  // 北京市的行政区划代码
        const urlCurrent = `https://restapi.amap.com/v3/weather/weatherInfo?city=${cityCode}&key=${apiKey}&extensions=base`;  // 实时天气
        const urlForecast = `https://restapi.amap.com/v3/weather/weatherInfo?city=${cityCode}&key=${apiKey}&extensions=all`;  // 未来天气

        try {
            // 获取当前天气
            const responseCurrent = await fetch(urlCurrent);
            const dataCurrent = await responseCurrent.json();

            if (dataCurrent.status === '1' && dataCurrent.lives && dataCurrent.lives.length > 0) {
                const currentWeather = dataCurrent.lives[0];
                const weather = currentWeather.weather;
                const temperature = currentWeather.temperature;
                const humidity = currentWeather.humidity;
                const iconUrl = getWeatherIcon(weather);

                document.getElementById('weather-info').innerHTML = `
                <strong>北京市</strong>：${weather}，温度：${temperature}°C，湿度：${humidity}%
            `;
                document.getElementById('weather-icon').src = iconUrl;
                document.getElementById('weather-icon').style.display = 'block';
            } else {
                document.getElementById('weather-info').innerHTML = `未找到当前天气数据。`;
            }

            // 获取未来15天天气
            const responseForecast = await fetch(urlForecast);
            const dataForecast = await responseForecast.json();

            if (dataForecast.status === '1' && dataForecast.forecasts && dataForecast.forecasts.length > 0) {
                const forecasts = dataForecast.forecasts[0].casts;
                let forecastHtml = '';
                forecasts.forEach(forecast => {
                    const date = forecast.date;
                    const dayWeather = forecast.dayweather;
                    const nightWeather = forecast.nightweather;
                    const dayTemp = forecast.daytemp;
                    const nightTemp = forecast.nighttemp;
                    const dayIconUrl = getWeatherIcon(dayWeather);

                    forecastHtml += `
                    <div class="card">
                        <img src="${dayIconUrl}" alt="天气图标" class="weather-icon">
                        <div class="details">
                            <p class="date">${date}</p>
                            <p>白天：${dayWeather}，温度：<span class="temperature">${dayTemp}°C</span></p>
                            <p>夜晚：${nightWeather}，温度：<span class="temperature">${nightTemp}°C</span></p>
                        </div>
                    </div>
                `;
                });
                document.getElementById('forecast-weather').innerHTML = forecastHtml;
            } else {
                document.getElementById('forecast-weather').innerHTML = `未找到未来天气预报数据。`;
            }
        } catch (error) {
            document.getElementById('weather-info').innerHTML = `获取天气信息失败，错误：${error.message}`;
        }
    }




    // 返回天气图标的 URL
    function getWeatherIcon(weather) {
        let iconUrl = '';
        switch (weather) {
            case '晴':
                iconUrl = 'image/晴.jpg';
                break;
            case '多云':
                iconUrl = 'image/多云.jpg';
                break;
            case '小雨':
                iconUrl = 'image/雨.jpg';
                break;
            case '阴':
                iconUrl = 'image/阴.jpg';
                break;
            case '雪':
                iconUrl = 'image/雪.jpg';
                break;
            case '大风':
                iconUrl = 'image/风.jpg';
                break;
            case '阵雨':
                iconUrl = 'image/阵雨.jpg';
                break;
            case '雾霾':
                iconUrl = 'image/雾霾.jpg';
                break;
            case '高温':
                iconUrl = 'image/高温.jpg';
                break;
            case '低温':
                iconUrl = 'image/低温.jpg';
                break;
            case '雨夹雪':
                iconUrl = 'image/雨夹雪.jpg';
                break;
            case '冰霜':
                iconUrl = 'image/冰霜.jpg';
                break;
            case '冰雹':
                iconUrl = 'image/冰雹.jpg';
                break;
            case '大雪':
                iconUrl = 'image/大雪.jpg';
                break;
            case '雷电':
                iconUrl = 'image/雷电.jpg';
                break;
           
            // 可以继续添加更多天气情况的图标
            default:
                iconUrl = 'image/晴.jpg'; // 默认图标
        }
        return iconUrl;
    }

    // 页面加载时自动获取天气数据
    window.onload = getWeather;
</script>

</asp:Content>

